Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[FE] staleTime옵션 추가 & 해더 버튼 클릭 이벤트 최적화 & 뉴스 레이아웃 #196

Merged
merged 8 commits into from
Nov 25, 2024

Conversation

dannysir
Copy link
Collaborator

@dannysir dannysir commented Nov 25, 2024

두 가지 PR 템플릿 중 하나를 골라 작성하시면 됩니다!

✅ 주요 작업

  • 랭킹 API 연동.
  • TopFive, Search useQuery 옵션 staleTime 추가.
  • 헤더 버튼 클릭시 같은 위치라면 새로고침 못하도록 수정.
  • 뉴스 레이아웃 생성.
  • 홈 화면에 useQuery를 이용해 에러 처리로 새로고침시 오류 수정.
2024-11-25.7.41.41.mov

💭 고민과 해결과정

홈화면에서 새로고침을 빠르게 했을 때 서버에서 500관련 에러가 나면서 errorBoundary에 걸리는 것을 확인했다.
따라서 해당 문제를 해결하기 위해 fetch 로직에 에러를 던지고 useQuery의 isError를 통해 확인할 수 있도록 수정했다. 이후 내부에서 isError일 경우 return을 진행하는 방식으로 수정했다.


📊 FE/BE 전체 작업 내역

@dannysir dannysir added FE 프론트엔드 LAYOUT 레이아웃 구현 BUGFIX 버그 픽스 labels Nov 25, 2024
@dannysir dannysir requested a review from dongree November 25, 2024 11:44
@dannysir dannysir self-assigned this Nov 25, 2024
Copy link
Collaborator

@dongree dongree left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

오늘도 수고하셨습니다!
프로젝트 마감까지 얼마 남지 않았는데 끝까지 파이팅해봅시다 ㅎㅎ 😊

Comment on lines +34 to +39
const handleLink = (to: string) => {
if (location.pathname === to) {
return;
}
navigate(to);
};
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

좋습니다! 페이지 이동 작업을 줄일 수 있겠네요 👍👍

Comment on lines +2 to +5
const response = await fetch(`${import.meta.env.VITE_API_URL}/ranking`, {
credentials: 'include',
headers: { 'Content-Type': 'application/json' },
});
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟢 로컬에서도 잘 동작하시나요??
아마 안 되시면 이렇게 하시면 잘 동작할 겁니다 ㅎㅎ

const url = import.meta.env.PROD
    ? `${import.meta.env.VITE_API_URL}/ranking`
    : '/api/ranking';

const response = await fetch(url, {...});

@dongree dongree merged commit 2e77ebe into front/main Nov 25, 2024
2 checks passed
@dannysir dannysir deleted the feature/connect/rank-#133 branch December 1, 2024 06:29
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
BUGFIX 버그 픽스 FE 프론트엔드 LAYOUT 레이아웃 구현
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants